<template>
    <basic-layout class="wjBox" title="我的问卷" :showAddBtn="false">
        <!-- 列表 -->
        <van-pull-refresh class="listRefresh" v-model="refreshLoading" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" @load="onLoad"
                :finished-text="listData.length ? '没有更多了' : ''">
                <div class="cardBox" v-for="item in listData" :key="item.questionnaireId"
                     @click="handleDetail(item)">
                    <h3>{{item.questionnaireName}}</h3>
                    <div class="divBox">问卷状态：
                        <span :style="{'color':spanColor(item)}" style="fontWeight: bold">
                            {{item.questionnaireStatus}}
                        </span>
                    </div>
                    <div class="divBox">开始时间：{{item.recycleDateStart}}</div>
                    <div class="divBox">结束时间：{{item.recycleDateEnd}}</div>
                    <template v-if="item.questionnaireStatus==='进行中'">
                        <van-button type="primary" size="small">进入</van-button>
                    </template>
                    <template v-else-if="item.questionnaireStatus==='已完成'">
                        <van-button type="primary" size="small">查看</van-button>
                    </template>
                </div>
            </van-list>
            <van-empty v-if="!loading && !listData.length" class="custom-image"
                :image="require('@/assets/images/empty.png')" description="暂无数据" />
        </van-pull-refresh>
    </basic-layout>
</template>

<script>
    import { mineWJ } from '@/api/platframe/questionnaire';
    export default {
        props: {},
        components: {},
        data() {
            return {
                loading: false,
                finished: false,
                refreshLoading: false,
                formData: {
                    pageNum: 1,
                    pageSize: 20,
                    questionnaireClassification: '',// 问卷分类
                    questionnaireStatus: '',        // 问卷状态
                    sortStatus: '',                 // 排序状态
                },
                listData: []
            };
        },
        created() {
            this.getListData();
        },
        methods: {
            onRefresh() {
                this.refreshLoading = false;
                this.finished = false;
                this.listData = [];
                this.formData.pageNum = 1;
                this.getListData();
            },
            onLoad () {
                this.formData.pageNum++;
                this.getListData();
            },
            // 获取列表数据
            getListData () {
                this.loading = true;
                mineWJ(this.formData).then((res) => {
                    this.loading = false;
                    if (res.code === 1000 && res.data) {
                        this.listData = [...this.listData, ...res.data.records];
                        if (this.listData.length >= res.data.total) {
                            this.finished = true;
                        }
                    } else {
                        this.loading = false;
                        this.finished = true;
                    }
                }).catch(() => {
                    this.loading = false;
                    this.finished = true;
                });
            },
            // 查看详情
            handleDetail (e) {
                let params = null;
                if (e.questionnaireStatus === '进行中') { // 进入问卷
                    params = { 
                        'isTF': true,
                        'id': e.questionnaireId,
                        'time': new Date().getTime()  // 进入问卷时间，用于计算完成时间
                    }
                } else if (e.questionnaireStatus === '已完成') {
                    params = { 
                        'isTF': false,
                        'resultId': e.resultId,
                    }
                }
                this.$router.push({ path: `/questionnaire/details?params=${JSON.stringify(params)}`});
            },
            
            // 不同问卷状态显示不同颜色
            spanColor(e){
                if (e.questionnaireStatus === '进行中') {
                    return  '#10ff87'
                } else if (e.questionnaireStatus === '已完成') {
                    return '#ffa500'
                } else {
                    return '##400a70'
                }
            },
        },
    };
</script>

<style scoped lang="less">
.wjBox ::v-deep .content {
    background-color: #ebebeb;
}
.listRefresh {
    .cardBox {
        height: 160px;
        margin: 10px 16px 0;
        background: url('~@/assets/images/wj.png') no-repeat 100% 100%;
        border-radius: 10px;
        padding: 8px 12px;
        position: relative;
        h3,.divBox {
            color: #f8f8f9;
            padding: 5px 10px;
        }
        .divBox:nth-child(4) {
            color: #fff;
        }
        .van-button {
            position: absolute;
            right: 16px;
        }
    }
}
</style>